<template>
  <div>
    <div class="flex flex-justify-center m-b-26px" v-for="item in circleList" :key="item.circleId" v-if="!circleIsSkeleton">
      <!-- 头像 -->
      <el-image
        :src="item.avatar"
        fit="cover"
        :lazy="true"
        :preview-src-list="[item.avatar]"
        class="w-64px h-64px <sm:w-40px <sm:h-40px m-b-5px border-1px border-dashed rounded-4px border-[--el-border-color] hover:border-[--el-color-primary]"
      >
        <template #error>
          <el-image
            src="https://pic4.zhimg.com/v2-702a23ebb518199355099df77a3cfe07_b.webp"
            fit="cover"
            class="w-64px h-64px m-b-5px border-2px border-dashed rounded-4px border-[--el-color-primary]"
          ></el-image>
        </template>
      </el-image>

      <!-- 昵称 和 九宫格 -->
      <div class="m-l-10px">
        <div class="flex m-x-1px">
          <!-- 昵称 -->
          <div class="line-height-normal">
            <div class="text-14px text-[--el-color-primary] font-bold w-300px line-clamp-1 m-b-5px">{{ item.nickName }}</div>
            <div class="text-15px text-#303536 dark:text-#F7F7F7 w-300px m-b-5px">
              {{ item.remark }}
            </div>
          </div>
        </div>

        <!-- 九宫格 -->
        <div class="w-300px max-h-300px flex flex-wrap" v-if="item.pictureList.length > 0">
          <el-image
            v-for="(elem, index) in item.pictureList"
            :key="index"
            :src="elem"
            :lazy="true"
            :preview-src-list="[item.pictureList[index]]"
            fit="cover"
            class="m-1px border-1px border-dashed rounded-4px border-[--el-border-color] hover:border-[--el-color-primary]"
            :class="[ item.pictureList.length === 1 ? 'max-w-92px max-h-300px' : item.pictureList.length === 4 ? 'max-w-136px max-h-136px' : 'max-w-94px max-h-94px' ]"
          >
            <template #error>
              <el-image :src="errorUrl" fit="cover"></el-image>
            </template>
          </el-image>
        </div>
        <!-- 创建时间 -->
        <div class="m-t-6px text-12px text-#555 dark:text-#999">创建时间：{{ item.createTime }}</div>
      </div>
    </div>
    <!-- 骨架屏 Begin -->
    <div class="flex flex-justify-center m-b-26px" v-for="(_item, index) in 10" :key="index" v-else>
      <div>
        <el-skeleton animated>
          <template #template>
            <div class="flex flex-justify-between m-b-15px">
              <div>
                <el-skeleton-item variant="image" class="rounded-4px w-64px h-64px <sm:w-40px <sm:h-40px m-b-5px" />
              </div>
              <div class="m-l-10px flex flex-col">
                <el-skeleton-item class="w-300px h-16px m-b-10px" />
                <el-skeleton-item class="w-300px h-38px m-b-10px" />
                <div class="w-300px max-h-300px flex flex-wrap gap-6px">
                  <el-skeleton-item variant="image" class="rounded-4px w-96px h-96px" v-for="(_item, index) in 9" :key="index" />
                </div>
              </div>
            </div>        
          </template>
        </el-skeleton>  
      </div>
    </div>
    <!-- 骨架屏 End --> 
    <!-- 加载更多 -->
    <div class="flex flex-justify-center m-t-16px" v-if="total > 10">
      <el-button
        type="primary"
        text
        bg
        :loading="loading"
        :disabled="searchParams.pageNo >= pages"
        v-debounce="handleMore"
      >
        {{ loadingText }}
      </el-button>
    </div>
    <el-empty remark="暂时未发布朋友圈哟！" v-if="circleList.length == 0 && !circleIsSkeleton" />
  </div>
</template>

<script setup lang="ts" name="circlePage">
import { ref, onMounted } from "vue";
import { koiMsgError } from "@/utils/koi.ts";
import { listPage } from "@/api/blog/circle/index.ts";
import { useDebounceFn } from '@vueuse/core';
import errorUrl from "@/assets/images/error/404.png";

/** 查询参数 */
const searchParams = ref<any>({
  pageNo: 1, // 第几页
  pageSize: 10 // 每页显示多少条
});

const circleList = ref<any>([]);
// 总条数
const total = ref(0);
// 总页数
const pages = ref(0);
// 骨架屏是否显示[默认关闭]
const circleIsSkeleton = ref(false);

/** 数据表格 */
const handleListPage = useDebounceFn(async () => {
  try {
    circleIsSkeleton.value = true;
    const res: any = await listPage(searchParams.value);
    if (res.data.records.length > 0) {
      res.data.records.forEach((item: any) => {
        if (item.pictureUrl == null || item.pictureUrl == "") {
          item.pictureList = [];
        } else {
          item.pictureList = item.pictureUrl.split(",");
        }
      });
    }
    circleList.value = circleList.value.concat(res.data.records);;
    total.value = res.data.total;
    pages.value = res.data.pages;
    circleIsSkeleton.value = false;
  } catch (error) {
    console.log(error);
    koiMsgError("数据查询失败，请刷新重试🌻");
  }
}, 500);

onMounted(() => {
  searchParams.value.pageNo = 1;
  circleList.value = [];
  handleListPage();
});

const loading = ref(false);
const loadingText = ref("加载更多...");

/** 加载更多 */
const handleMore = async () => {
  loadingText.value = "加载中...";
  loading.value = true;
  searchParams.value.pageNo++;
  if (searchParams.value.pageNo > pages.value) {
    loadingText.value = "亲，我也是有底线的！";
    loading.value = false;
    return;
  }
  await handleListPage();
  if (searchParams.value.pageNo == pages.value) {
    loadingText.value = "亲，我也是有底线的！";
    loading.value = false;
    return;
  }
  loadingText.value = "加载更多...";
  loading.value = false;
};
</script>

<style scoped>
</style>
